<template>
  <div class="app-container calendar-list-container">
    <el-row class="setting-row-wrapper" @click.native="handleOpenPwdClick">
      <el-col :span="11">
        <span class="setting-title">初始密码(123456)</span>        
      </el-col>
      <el-col :span="11" class="setting-btn-wrapper">
        <span :class="passwrdStatusColor">{{textMap[passwordSetStatus]}}</span>
      </el-col>
    </el-row>
    <el-row class="setting-row-wrapper" @click.native="handleOpenFiscalYearClick">
      <el-col :span="11">
        <span class="setting-title">财年设置</span>        
      </el-col>
      <el-col :span="11" class="setting-btn-wrapper">
        <span :class="fiscalYearStatusColor">{{textMap[fiscalYearSetStatus]}}</span>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTextMap[dialogStatus]" :visible.sync="pwdDialogFormVisible">
      <el-form :model="pwdForm" :rules="pwdRules" ref="pwdForm" label-width="20%">
        <el-form-item label="设置初始密码" prop="newPwd">
          <el-col :span="8">
            <el-input v-model="pwdForm.newPwd" class="form-input" placeholder="设置初始密码"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('pwdForm')">取 消</el-button>
        <el-button type="primary" @click="updateInitPwd('pwdForm')">修 改</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTextMap[dialogStatus]" :visible.sync="fiscalYearDialogFormVisible">
      <el-form :model="fiscalYearForm" :rules="fiscalYearRules" ref="fiscalYearForm" label-width="20%">
        <el-form-item label="设置财年" prop="newDate">
          <el-col :span="8">
            <el-date-picker
              v-model="fiscalYearForm.newDate"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('fiscalYearForm')">取 消</el-button>
        <el-button type="primary" @click="updateFiscalYear('fiscalYearForm')">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SettingsIndex',
  data () {
    return {
      passwordSetStatus: 'un-set',
      fiscalYearSetStatus: 'un-set',
      textMap: {
        'have-set': '已设置',
        'un-set': '未设置'
      },
      dialogTextMap: {
        pwd: '初始密码设置',
        fiscalYear: '财年设置'
      },
      dialogStatus: 'pwd',
      pwdDialogFormVisible: false,
      fiscalYearDialogFormVisible: false,
      pwdForm: {
        id: undefined,
        companyId: undefined,
        newPwd: undefined
      },
      fiscalYearForm: {
        id: undefined,
        companyId: undefined,
        newDate: undefined
      },
      pwdRules: {
        newPwd: [
          {
            required: true,
            message: "设置初始密码",
            trigger: "blur"
          }
        ]
      },
      fiscalYearRules: {
        newDate: [
          {
            required: true,
            message: "设置财年",
            trigger: "blur"
          }
        ] 
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  computed: {
    passwrdStatusColor: function () {
      return this.passwordSetStatus === 'un-set' ? 'unSetting' : 'haveSetting' 
    },
    fiscalYearStatusColor: function () {
      return this.fiscalYearSetStatus === 'un-set' ? 'unSetting' : 'haveSetting'
    }
  },
  methods: {
    handleOpenPwdClick: function (a, b) {
      this.pwdDialogFormVisible = true
      this.dialogStatus = 'pwd'
    },
    handleOpenFiscalYearClick: function () {
      this.fiscalYearDialogFormVisible = true
      this.dialogStatus = 'fiscalYear'
    },
    updateInitPwd: function (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.pwdDialogFormVisible = false
          putInitPwd(this.pwdForm).then(() => {
            this.fiscalYearDialogFpwdDialogFormVisibleormVisible = false
            // this.getList()
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    updateFiscalYear: function (formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          this.fiscalYearDialogFormVisible = false
          putFiscalYear(this.fiscalYearForm).then(() => {
            this.fiscalYearDialogFormVisible = false
            // this.getList()
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            })
          })
        } else {
          return false
        }
      })
    },
    cancel (formName) {
      this.fiscalYearDialogFormVisible = false
      this.pwdDialogFormVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
  .setting-row-wrapper {
    border: 1px solid #f2f6fc;
    line-height: 50px;
    padding: 5px;
  }
  .setting-row-wrapper:hover {
    cursor: pointer;
  }
  .setting-btn-wrapper {
    text-align: right;
  }
  .haveSetting {
    color: green;
  }
  .unSetting {
    color: red;
  }
</style>
